<template>
  <div class="user-evaluation">
    <!-- 父容器 -->
    <div class="viewport">
      <!-- 概览区域 -->
      <div class="column">
        <div class="panel overview">
          <div class="inner">
            <ul>
              <li>
                <h4>2190</h4>
                <span> 设备总数 </span>
              </li>
              <li>
                <h4>2190</h4>
                <span> 设备总数 </span>
              </li>
              <li>
                <h4>2190</h4>
                <span> 设备总数 </span>
              </li>
              <li>
                <h4>2190</h4>
                <span> 设备总数 </span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 监控区域 -->
        <div class="panel monitor">
          <div class="inner">
            <div class="tabs">
              <a href="javascript:;" :class="{ active: ActiveClass == 1 }" @click="onTabs(1)">故障设备监控</a>
              <a href="javascript:;" :class="{ active: ActiveClass == 2 }" @click="onTabs(2)">异常设备监控</a>
            </div>
            <div v-show="ActiveClass == 1" class="content" style="display: block">
              <div class="head">
                <span class="col">故障时间</span>
                <span class="col">设备地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20180701</span>
                    <span class="col">11北京市昌平西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                  </div>
                  <div class="row">
                    <span class="col">20190601</span>
                    <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190704</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000003</span>
                  </div>
                  <div class="row">
                    <span class="col">20180701</span>
                    <span class="col">北京市昌平区建路金燕龙写字楼</span>
                    <span class="col">1000004</span>
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000005</span>
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000006</span>
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                    <span class="col">1000007</span>
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000008</span>
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000009</span>
                  </div>
                  <div class="row">
                    <span class="col">20190710</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000010</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="ActiveClass == 2" class="content">
              <div class="head">
                <span class="col">异常时间</span>
                <span class="col">设备地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190703</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190704</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190705</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190706</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190707</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190708</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190709</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                  <div class="row">
                    <span class="col">20190710</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 点位分布区域 -->
        <div class="point panel">
          <div class="inner">
            <h3>点位分布统计</h3>
            <div class="chart">
              <div class="pie">
                <bar-echart />
              </div>
              <div class="data">
                <div class="item">
                  <h4>320,11</h4>
                  <span><i class="el-icon-star-on" style="color: #ed3f35" /> 点位总数 </span>
                </div>
                <div class="item">
                  <h4>418</h4>
                  <span> <i class="el-icon-star-on" style="color: #eacf19" />本月新增 </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 点位分布区域结束 -->
      </div>
      <div class="column">
        <!-- 地图 -->
        <div class="map">
          <h3>
            <i class="el-icon-bangzhu" style="color: #75beff" />
            设备数据统计
          </h3>
          <div class="chart">
            <div class="geo">
              <Mymap />
            </div>
          </div>
        </div>
        <!-- 用户 -->
        <div class="users panel">
          <div class="inner">
            <h3>全国用户总量统计</h3>
            <div class="chart">
              <div class="bar">
                <bar-chart2></bar-chart2>
              </div>
              <div class="data">
                <div class="item">
                  <h4>120,899</h4>
                  <span>
                    <i class="el-icon-star-on" style="color: #ed3f35" />
                    用户总量
                  </span>
                </div>
                <div class="item">
                  <h4>248</h4>
                  <span>
                    <i class="el-icon-star-on" style="color: #eacf19" />
                    本月新增
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 订单 -->
        <div class="order panel">
          <div class="inner">
            <!-- 筛选 -->
            <div class="filter">
              <a href="javascript:;" :class="{ active: ActiveChange == 1 }" @click="onClick(1)">365天</a>
              <a href="javascript:;" :class="{ active: ActiveChange == 2 }" @click="onClick(2)">90天</a>
              <a href="javascript:;" :class="{ active: ActiveChange == 3 }" @click="onClick(3)">30天</a>
              <a href="javascript:;" :class="{ active: ActiveChange == 4 }" @click="onClick(4)">24小时</a>
            </div>
            <!-- 数据 -->
            <div v-show="ActiveChange == 1" class="data">
              <div class="item">
                <h4>20,301,987</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #ed3f35" />
                  订单量
                </span>
              </div>
              <div class="item">
                <h4>99834</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #eacf19" />
                  销售额(万元)
                </span>
              </div>
            </div>
            <!-- 2 -->
            <div v-show="ActiveChange == 2" class="data">
              <div class="item">
                <h4>101,987</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #ed3f35" />
                  订单量
                </span>
              </div>
              <div class="item">
                <h4>9034</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #eacf19" />
                  销售额(万元)
                </span>
              </div>
            </div>
            <!-- 3 -->
            <div v-show="ActiveChange == 3" class="data">
              <div class="item">
                <h4>1,987</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #ed3f35" />
                  订单量
                </span>
              </div>
              <div class="item">
                <h4>834</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #eacf19" />
                  销售额(万元)
                </span>
              </div>
            </div>
            <!-- 4 -->
            <div v-show="ActiveChange == 4" class="data">
              <div class="item">
                <h4>321</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #ed3f35" />
                  订单量
                </span>
              </div>
              <div class="item">
                <h4>256</h4>
                <span>
                  <i class="el-icon-star-on" style="color: #eacf19" />
                  销售额(万元)
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 销售额 -->
        <div class="sales panel">
          <div class="inner">
            <div class="caption">
              <h3>销售额统计</h3>
              <!-- <a href="javascript:;" :class="{ active: ActiveChange == 1 }" @click="onClick(1)">年</a>
              <a href="javascript:;" :class="{ active: ActiveChange == 2 }" @click="onClick(2)">季</a>
              <a href="javascript:;" :class="{ active: ActiveChange == 3 }" @click="onClick(3)">月</a>
              <a href="javascript:;" :class="{ active: ActiveChange == 4 }" @click="onClick(4)">周</a> -->
            </div>
            <div class="chart">
              <div class="label">单位:万</div>
              <div class="line">
                <line-echart />
              </div>
            </div>
          </div>
        </div>
        <!-- 渠道 季度 -->
        <div class="wrap">
          <div class="channel panel">
            <div class="inner">
              <h3>渠道分布</h3>
              <div class="data">
                <div class="radar">
                  <radar-chart />
                </div>
              </div>
            </div>
          </div>
          <div class="quarter panel">
            <div class="inner">
              <h3>一季度销售进度</h3>
              <div class="chart">
                <div class="box">
                  <div class="gauge">
                    <pie-chart />
                  </div>
                  <div class="label">75<small> %</small></div>
                </div>
                <div class="data">
                  <div class="item">
                    <h4>1,321</h4>
                    <span> 销售额(万元) </span>
                  </div>
                  <div class="item">
                    <h4>150%</h4>
                    <span> 同比增长 </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 排行榜 -->
        <div class="top panel">
          <div class="inner">
            <div class="all">
              <h3>全国热榜</h3>
              <ul>
                <li>
                  <i class="el-icon-goblet" style="color: #d93f36" />
                  可爱多
                </li>
                <li>
                  <i class="el-icon-goblet-full" style="color: #68d8fe" />
                  娃哈啥
                </li>
                <li>
                  <i class="el-icon-goblet-full" style="color: #4c9bfd" />
                  喜之郎
                </li>
              </ul>
            </div>
            <div class="province">
              <h3>各省热销 <i class="date">// 近30日 //</i></h3>
              <div class="data">
                <ul class="sup">
                  <li>
                    <span>北京</span>
                    <span>25,179 </span>
                  </li>
                  <li>
                    <span>河北</span>
                    <span>23,252 </span>
                  </li>
                  <li>
                    <span>上海</span>
                    <span>20,760 </span>
                  </li>
                  <li>
                    <span>江苏</span>
                    <span>23,252 </span>
                  </li>
                  <li>
                    <span>山东</span>
                    <span>20,760 </span>
                  </li>
                </ul>
                <ul class="sub">
                  <li><span>可爱多 </span><span>3,457 </span></li>
                  <li><span>哇哈哈 </span><span>3,457 </span></li>
                  <li><span>喜之郎 </span><span>3,457 </span></li>
                  <li><span>八喜 </span><span>3,457 </span></li>
                  <li><span>小洋人 </span><span>3,457 </span></li>
                  <li><span>好多鱼 </span><span>3,457 </span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { ColorPicker } from 'element-ui'
import barEchart from './components/barEchart.vue'
import barChart2 from './components/barChart2.vue'
import LineEchart from './components/LineChart.vue'
import RadarChart from './components/RadarChart.vue'
import PieChart from './components/pieChart.vue'
import Mymap from './components/myMap.vue'
export default {
  name: 'VueAdminTemplateIndex',
  components: {
    barEchart,
    barChart2,
    LineEchart,
    RadarChart,
    PieChart,
    // eslint-disable-next-line vue/no-unused-components
    Mymap
  },

  data() {
    return {
      ActiveClass: 1,
      ActiveChange: 1,
      dataNum: {
        year: [
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
          [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
          [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
          [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
          [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
          [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
          [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
      }
    }
  },

  mounted() {},

  methods: {
    onTabs(i) {
      this.ActiveClass = i
    },
    onClick(i) {
      this.ActiveChange = i
      console.log(i)
    }
  }
}
</script>
<style lang="scss" scoped>
@import './userEvaluation.scss';
</style>

